<template>
  <div class="h-full pb-60 m-relative w-full">
    <div class="p-20 h-full overflow-y-auto w-full">
      <a-form ref="formRef" :model="form" size="medium" auto-label-width class="w-full">
        <a-form-item label="审核结果" field="status" required>
          <a-radio-group v-model="form.status">
            <a-radio :value="30">审核通过</a-radio>
            <a-radio :value="-100">审核不通过</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="补充说明" field="remark" class="w-full" v-if="form.status == -100">
          <div class="flex-col w-full">
            <a-textarea
              class="mb-10"
              v-model="form.remark"
              placeholder="请填写原因"
              :auto-size="{
                minRows: 6,
                maxRows: 10
              }"
            />
            <div class="flex flex-a-c flex-wrap">
              <div
                class="mt-10 mr-10 w-24n h-24n overflow-hidden cursor-pointer m-relative flex-center"
                style="border: 1px solid #eee"
              >
                <a-upload
                  name="photoImg"
                  multiple
                  draggable
                  :show-file-list="false"
                  accept=".jpg, .jpeg, .png, .gif"
                  :action="uploadImage()"
                  :headers="{ Authorization: token }"
                  @before-upload="imgLoading = true"
                  @success="onImg"
                  @error="onImgError"
                  v-show="!imgLoading"
                >
                  <template #upload-button>
                    <div class="flex-col flex-center w-24n h-24n">
                      <icon-plus />
                      <span class="mt-10 text-size-12">上传图片</span>
                    </div>
                  </template>
                </a-upload>
                <a-button v-show="imgLoading" type="text" class="p-0" size="mini" :loading="true">
                  <template #icon>
                    <icon-plus />
                  </template>
                  <template #default>图片上传中</template>
                </a-button>
              </div>
              <VueDraggableNext :list="form.images">
                <div
                  v-for="(item, index) in form.images"
                  :key="index"
                  class="mt-10 mr-10 w-24n h-24n overflow-hidden round-12 cursor-pointer m-relative inline-block"
                  style="border: 1px solid #eee"
                >
                  <a-image width="100%" height="100%" :src="item" fit="scale-down" />
                  <icon-close-circle
                    size="24"
                    class="m-absolute t-4 r-4 text-red"
                    @click.stop="form.images.splice(index, 1)"
                  />
                </div>
              </VueDraggableNext>
            </div>
            <span class="mt-10 text999 text-size-12">在次可补充图片说明</span>
          </div>
        </a-form-item>
        <a-form-item hide-label class="w-full" v-else>
          <div class="flex-col text999 text-size-12">
            <span>审核通过后，将通知申请人，并展示在活动中</span>
            <span>请确保奖励已发放，提交后无法更改</span>
          </div>
        </a-form-item>
      </a-form>
      <div class="m-absolute border-box b-0 l-0 r-0 h-60 flex flex-a-c bt-f0 px-20 flex-j-e">
        <a-space>
          <a-button @click="props.onClose(0)">取消</a-button>
          <a-button type="primary" :loading="loading" @click="onOk">确定</a-button>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script setup>
import { batchTaskAudit, uploadImage } from '@/apis'
import { Message } from '@arco-design/web-vue'
import { useUserStore } from '@/store'
import { getToken } from '@/utils/auth'
import { VueDraggableNext } from 'vue-draggable-next'
const props = defineProps(['params', 'onClose'])
const userStore = useUserStore()
const formRef = ref()
const loading = ref(false)
const imgLoading = ref(false)
// 上传组件需要增加token
const tokenSource = getToken()
const token = tokenSource ? `Bearer ${tokenSource}` : ''
const form = reactive({
  settleId: props.params.id, //结算记录ID
  status: 30, //状态
  applicant: undefined,
  remark: undefined,
  images: [] //图片
})

// 上传素材图片成功
const onImg = async (fileItem) => {
  if (fileItem.response.code === 200) {
    form.images.push(fileItem.response.data.url)
  } else {
    Message.error(fileItem.response.message)
  }
  imgLoading.value = false
}

// 上传素材图片失败
const onImgError = (e) => {
  Message.error(e.response.message)
  imgLoading.value = false
}

const onOk = async () => {
  try {
    loading.value = true
    const validateResult = await formRef.value?.validate()
    if (validateResult) return false
    const param = { ...form }
    if (param.status == 30) {
      param.remark = undefined
      param.images = undefined
    }
    await batchTaskAudit({
      ...param,
      applicant: userStore.userName,
      images: param?.images?.length ? param.images : undefined
    })
    Message.success('操作成功')
    props.onClose()
  } finally {
    loading.value = false
  }
}
</script>
<style scoped lang="scss">
.textd43030 {
  color: #d43030;
}
.table2 {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
</style>
